<script setup lang="ts">
import { ref } from "vue"
import * as types from "../types";
import { computed } from "vue";
import { Modal } from 'ant-design-vue'

let prefabs = ref<types.PrefabRet>({})
const prefabList = computed(() => {
  return Object.keys(prefabs.value)
})

let pics = ref<types.ItemInfoRet>({ dir: '', data: [] })
let picMap: types.PrefabRet = {}
let spine = ref<types.ItemInfoRet>({ dir: '', data: [] })
let spineMap: types.PrefabRet = {}
let scripts = ref<types.ItemInfoRet>({ dir: '', data: [] })
let scriptsMap: types.PrefabRet = {}
let res = ref<types.WorkParam>({})
const emptyRegData = {
  spine: '', script: '', blurimg: '', img: ''
}
let now = ref<{ name: string, data: types.regData }>({
  'data': Object.assign({}, emptyRegData), 'name': ''
})

async function setPrefab() {
  let t = await window.api.prefabInfo()
  if (t) {
    if ('prefabs' in t) {
      setPic(t.pic)
      setSpine(t.spine)
      setScripts(t.scripts)
      prefabs.value = t.prefabs
    } else {
      prefabs.value = t
    }
  }
}
function choosePrefab(name: string) {
  if (name == now.value.name) return
  if (now.value.name != '') {
    const data = now.value.data
    let ok = true
    let i: keyof types.regData
    for (i in data) {
      if (data[i] == '') {
        ok = false
        break
      }
    }
    if (ok) {
      if (now.value.name in res.value) {
        //把之前的加到列表里面去
        const data = res.value[now.value.name]
        pics.value.data.push({ name: data.img, guid: picMap[data.img] })
        pics.value.data.push({ name: data.blurimg, guid: picMap[data.blurimg] })
        scripts.value.data.push({ name: data.script, guid: scriptsMap[data.script] })
        spine.value.data.push({ name: data.spine, guid: spineMap[data.spine] })
      }
      res.value[now.value.name] = data
      for (let index = 0; index < pics.value.data.length;) {
        const element = pics.value.data[index];
        if (element.name == data.img || element.name == data.blurimg) {
          pics.value.data.splice(index, 1)
        } else index++
      }
      for (let index = 0; index < spine.value.data.length; index++) {
        const element = spine.value.data[index];
        if (element.name == data.spine) {
          spine.value.data.splice(index, 1)
          break
        }
      }
      for (let index = 0; index < scripts.value.data.length; index++) {
        const element = scripts.value.data[index];
        if (element.name == data.script) {
          scripts.value.data.splice(index, 1)
          break
        }
      }
    }
    now.value = {
      'data': Object.assign({}, emptyRegData), 'name': ''
    }
  }
  now.value.name = name
  if (name in res.value) {
    now.value.data = Object.assign({}, res.value[name])
  }
}
async function setSpine(v = null) {
  let t = v == null ? await window.api.spineInfo() : v
  if (t) {
    spine.value = t
  }
  spineMap = {}
  spine.value.data.forEach((i) => {
    spineMap[i.name] = i.guid
  })
}
function choosetSpine(name: string) {
  now.value.data.spine = name
}
async function setScripts(v = null) {
  let t = v == null ? await window.api.scriptInfo() : v
  if (t) {
    scripts.value = t
  }
  scriptsMap = {}
  scripts.value.data.forEach((i) => {
    scriptsMap[i.name] = i.guid
  })
}
function choosetScripts(name: string) {
  now.value.data.script = name
}
async function setPic(v = null) {
  let t = v == null ? await window.api.picInfo() : v
  if (t) {
    pics.value = t
  }
  picMap = {}
  pics.value.data.forEach((i) => {
    picMap[i.name] = i.guid
  })
}
function choosetPic(name: string) {
  if (name.endsWith('mohu')) {
    now.value.data.blurimg = name
    let img = name.substring(0, name.length - 5)
    if (img in picMap) {
      now.value.data.img = img
    }
  } else {
    if (now.value.data.img != '') {
      if (now.value.data.blurimg != '') {
        //都不为空，就代表选错了清空
        now.value.data.blurimg = ''
        now.value.data.img = ''
      } else {
        now.value.data.blurimg = name
      }
    } else {
      now.value.data.img = name
      if (name + '_mohu' in picMap) {
        now.value.data.blurimg = name + '_mohu'
      } else if (name + '_mh' in picMap) {
        now.value.data.blurimg = name + '_mh'
      } else if (name + '_blur' in picMap) {
        now.value.data.blurimg = name + '_blur'
      }
    }
  }
}
function genRes() {
  const result: types.WorkParam = {}
  let i: keyof types.WorkParam
  for (i in res.value) {
    const data = res.value[i]
    result[prefabs.value[i]] = {
      img: picMap[data.img],
      blurimg: picMap[data.blurimg],
      script: scriptsMap[data.script],
      spine: spineMap[data.spine]
    }
  }
  return result
}
function work() {
  choosePrefab('')
  const restNum = Object.keys(prefabs.value).length - Object.keys(res.value).length
  Modal.confirm({
    title: `提交修改`,
    content: `你还有${restNum}个预制体没有配置，确定修改？`,
    onOk() {
      window.api.send('work', genRes())
    },
    onCancel() {
    },
  });
}
</script>

<template>
  <a-layout style="height: 100%">
    <a-content>
      <a-row>
        <a-col :flex="2">
          <a-list bordered :data-source="prefabList">
            <template #renderItem="{ item }">
              <a-list-item>
                <p class="list-item" :class="{ blue: item == now.name, red: item != now.name && item in res }"
                  @click="choosePrefab(item)">{{ item }}</p>
              </a-list-item>
            </template>
            <template #header>
              <p>棋子预制体</p>
            </template>
            <template #footer>
              <a-button @click="setPrefab">选择文件夹</a-button>
              <a-button @click="work">搞定收工</a-button>
            </template>
          </a-list>
        </a-col>
        <a-col :flex="2">
          <a-card title="棋子内容">
            <p>静态图片：{{ now.data.img }}</p>
            <p>模糊图片：{{ now.data.blurimg }}</p>
            <p>脚本：{{ now.data.script }}</p>
            <p>spine：{{ now.data.spine }}</p>
          </a-card>
        </a-col>
        <a-col :flex="2">
          <a-list bordered :data-source="pics.data">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-popover trigger="hover">
                  <template #content><img class="img-preview" :src="pics.dir + '/' + item.name + '.png'">
                  </template>
                  <p class="list-item" @click="choosetPic(item.name)">{{ item.name }} </p>
                </a-popover>
              </a-list-item>
            </template>
            <template #header>
              <p>图片</p>
            </template>
            <template #footer>
              <a-button @click="setPic()">选择文件夹</a-button>
            </template>
          </a-list>
        </a-col>
        <a-col :flex="2">
          <a-list bordered :data-source="scripts.data">
            <template #renderItem="{ item }">
              <a-list-item>
                <p class="list-item" @click="choosetScripts(item.name)">{{ item.name }}</p>
              </a-list-item>
            </template>
            <template #header>
              <p>脚本</p>
            </template>
            <template #footer>
              <a-button @click="setScripts()">选择文件夹</a-button>
            </template>
          </a-list>
        </a-col>
        <a-col :flex="2">
          <a-list bordered :data-source="spine.data">
            <template #renderItem="{ item }">
              <a-list-item>
                <p class="list-item" @click="choosetSpine(item.name)">{{ item.name }}</p>
              </a-list-item>
            </template>
            <template #header>
              <p>spine</p>
            </template>
            <template #footer>
              <a-button @click="setSpine()">选择文件夹</a-button>
            </template>
          </a-list>
        </a-col>
      </a-row>
    </a-content>
  </a-layout>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100%;
}

.list-item {
  margin: 0;
  width: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blueviolet;
}

.img-preview {
  height: 100px;
}
</style>
